<template>
  <div id="container">
    <section class="mainbox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel bar">
          <div id="main2" class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <div id="main3" class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <div id="main4" class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="column">
        <div class="map">
          <!-- <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div> -->
          <div id="main1" class="chart"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        <div class="panel bar2">
          <div id="main5" class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line2">
          <div id="main6" class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
          <div id="main7" class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { listDiseasestatistics, getDiseasestatistics, delDiseasestatistics, addDiseasestatistics, updateDiseasestatistics } from "@/api/diseasestatistics/diseasestatistics";
import * as echarts from "echarts";
import china from "../assets/china.json";
//import request from '../utils/request'

export default {
  name: "DataVision",
  data() {
    return {
      dataList: [
        { name: "北京", value: 76525 },
        { name: "天津", value: 5139 },
        { name: "河北", value: 39266 },
        { name: "山西", value: 8919 },
        { name: "内蒙古", value: 3433 },
        { name: "辽宁", value: 2615 },
        { name: "吉林", value: 2068 },
        { name: "黑龙江", value: 3495 },
        { name: "上海", value: 14370 },
        { name: "江苏", value: 47827 },
        { name: "浙江", value: 256494 },
        { name: "安徽", value: 51396 },
        { name: "福建", value: 14863 },
        { name: "江西", value: 27570 },
        { name: "山东", value: 30484 },
        { name: "河南", value: 88394 },
        { name: "湖北", value: 86631 },
        { name: "湖南", value: 94186 },
        { name: "广东", value: 138940 },
        { name: "广西", value: 30283 },
        { name: "海南", value: 5636 },
        { name: "重庆", value: 21443 },
        { name: "四川", value: 30139 },
        { name: "贵州", value: 6707 },
        { name: "云南", value: 16241 },
        { name: "西藏", value: 177 },
        { name: "陕西", value: 27973 },
        { name: "甘肃", value: 7579 },
        { name: "青海", value: 1146 },
        { name: "宁夏", value: 895 },
        { name: "新疆", value: 4444 },
        { name: "台湾", value: 895 },
        { name: "香港", value: 177 },
        { name: "澳门", value: 177 },
      ],
    };
  },
  created() {
    //页面加载时向后端请求数据
    this.load();
  },
  methods: {
    updateChart() {
      let option1 = {
        title: {
          text: '2023年流感患病人数热力图',
          textStyle: {
            align: 'center', // 居中对齐
            color: 'black',
            fontSize: 35,
          },
          top: '8%', // 垂直居中
          left: '50%', // 水平居中
          textAlign: 'center', // 文本居中
        },
        tooltip: {
          triggerOn: "click",
          formatter: function (e) {
            return ".5" == e.value
              ? e.name + "：有疑似病例"
              : e.seriesName + "<br />" + e.name + "：" + e.value;
          },
        },
        visualMap: {
          min: 0,
          max: 100000,
          left: 26,
          bottom: 100,
          showLabel: true,
          text: ["高", "低"],
          textStyle: {
            color: 'black', // 设置文字颜色为白色
          },
          pieces: [
            
            {
              gt: 30000,
              label: "> 30000人",
              color: "#7f1100",
            },
            {
              gte: 10000,
              lte: 30000,
              label: "10000 - 30000人",
              color: "#ff5428",
            },
            {
              gte: 1000,
              lt: 10000,
              label: "1000 - 10000人",
              color: "#ff8c71",
            },
            {
              gte: 100,
              lt: 1000,
              label: "100 - 1000人",
              color: "#ffd768",
            },
            {
              gte: 1,
              lt: 100,
              label: "1 - 100人",
              color: "#BEDAEE",
            },
          ],
          show: true,
        },
        geo: {
          map: "china",
          roam: true,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1.13,
          top: '24%', // 调整地图的相对位置
    // left: '10%', // 调整地图的相对位置
    // right: '10%', // 调整地图的相对位置
    // bottom: '10%', // 调整地图的相对位置
          label: {
            show: true,
            fontSize: "14",
            color: "rgba(0,0,0,0.7)",
          },
          itemStyle: {
            borderColor: "rgba(0, 0, 0, 0.2)",
          },
          emphasis: {
            areaColor: "#f2d5ad",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "确诊病例",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      this.myChart1.setOption(option1);
    },
    getList() {
      this.loading = true;
      listDiseasestatistics(this.queryParams).then(response => {
        this.diseasestatisticsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    load() {
      // request.get("/admin").then(res => {
      //     if(res.code === '0'){//判断返回数据是否成功
      //         this.tableData = res.data;//将返回的数据放入data中
      //     }else{
      //     }
      // })
    },
    liugan() {
      this.dataList = [
        { name: "北京", value: 76525 },
        { name: "天津", value: 5139 },
        { name: "河北", value: 39266 },
        { name: "山西", value: 8919 },
        { name: "内蒙古", value: 3433 },
        { name: "辽宁", value: 2615 },
        { name: "吉林", value: 2068 },
        { name: "黑龙江", value: 3495 },
        { name: "上海", value: 14370 },
        { name: "江苏", value: 47827 },
        { name: "浙江", value: 256494 },
        { name: "安徽", value: 51396 },
        { name: "福建", value: 14863 },
        { name: "江西", value: 27570 },
        { name: "山东", value: 30484 },
        { name: "河南", value: 88394 },
        { name: "湖北", value: 86631 },
        { name: "湖南", value: 94186 },
        { name: "广东", value: 138940 },
        { name: "广西", value: 30283 },
        { name: "海南", value: 5636 },
        { name: "重庆", value: 21443 },
        { name: "四川", value: 30139 },
        { name: "贵州", value: 6707 },
        { name: "云南", value: 16241 },
        { name: "西藏", value: 177 },
        { name: "陕西", value: 27973 },
        { name: "甘肃", value: 7579 },
        { name: "青海", value: 1146 },
        { name: "宁夏", value: 895 },
        { name: "新疆", value: 4444 },
        { name: "台湾", value: 895 },
        { name: "香港", value: 177 },
        { name: "澳门", value: 177 },
      ];

      this.updateChart();
    },
    shouzukoubing() {
      this.dataList = [
        { name: "北京", value: 2172 },
        { name: "天津", value: 1131 },
        { name: "河北", value: 4999 },
        { name: "山西", value: 4551 },
        { name: "内蒙古", value: 881 },
        { name: "辽宁", value: 458 },
        { name: "吉林", value: 162 },
        { name: "黑龙江", value: 127 },
        { name: "上海", value: 5574 },
        { name: "江苏", value: 44934 },
        { name: "浙江", value: 58288 },
        { name: "安徽", value: 54158 },
        { name: "福建", value: 26864 },
        { name: "江西", value: 35745 },
        { name: "山东", value: 19265 },
        { name: "河南", value: 47375 },
        { name: "湖北", value: 24385 },
        { name: "湖南", value: 114400 },
        { name: "广东", value: 60342 },
        { name: "广西", value: 29827 },
        { name: "海南", value: 4419 },
        { name: "重庆", value: 28519 },
        { name: "四川", value: 63929 },
        { name: "贵州", value: 29601 },
        { name: "云南", value: 68443 },
        { name: "西藏", value: 1503 },
        { name: "陕西", value: 24817 },
        { name: "甘肃", value: 2753 },
        { name: "青海", value: 762 },
        { name: "宁夏", value: 580 },
        { name: "新疆", value: 391 },
        { name: "台湾", value: 895 },
        { name: "香港", value: 177 },
        { name: "澳门", value: 177 },
      ];

      this.updateChart();
    },
    xinghongre() {
      this.dataList = [
        { name: "北京", value: 300 },
        { name: "天津", value: 274 },
        { name: "河北", value: 727 },
        { name: "山西", value: 524 },
        { name: "内蒙古", value: 427 },
        { name: "辽宁", value: 605 },
        { name: "吉林", value: 223 },
        { name: "黑龙江", value: 226 },
        { name: "上海", value: 763 },
        { name: "江苏", value: 1346 },
        { name: "浙江", value: 757 },
        { name: "安徽", value: 557 },
        { name: "福建", value: 383 },
        { name: "江西", value: 73 },
        { name: "山东", value: 1997 },
        { name: "河南", value: 553 },
        { name: "湖北", value: 209 },
        { name: "湖南", value: 728 },
        { name: "广东", value: 1600 },
        { name: "广西", value: 380 },
        { name: "海南", value: 6 },
        { name: "重庆", value: 231 },
        { name: "四川", value: 660 },
        { name: "贵州", value: 275 },
        { name: "云南", value: 904 },
        { name: "西藏", value: 27 },
        { name: "陕西", value: 619 },
        { name: "甘肃", value: 363 },
        { name: "青海", value: 223 },
        { name: "宁夏", value: 241 },
        { name: "新疆", value: 363 },
        { name: "台湾", value: 895 },
        { name: "香港", value: 177 },
        { name: "澳门", value: 177 },
      ];

      this.updateChart();
    },
  },
  mounted() {
    //中国地图，三种疾病患病人数
    this.myChart1 = echarts.init(document.getElementById("main1"));
    echarts.registerMap("china", china);
    this.updateChart();




    //全国历年患病人数，折线图
    var myChart2 = echarts.init(document.getElementById("main2"));
    let option2 = {
      backgroundColor: 'white',
      title: {
        text: '全国历年患病人数',
        textStyle: {
          align: 'center',
          color: 'black',
          fontSize: 20,
        },
        top: '1%',
        left: '10%',
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        right: '0%',
        data: ["流感", "手足口病", "猩红热"],
        textStyle: {
          color: 'black'
        }
      },
      grid: {
        left: '1%',
        right: '8%',
        bottom: 5,
        top: 40,
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015,
          2016, 2017, 2018, 2019, 2020
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "流感",
          type: "line",
          stack: "Total",
          data: [
            45672, 57557, 36434, 41692, 198381, 64502, 66133, 122140, 129873, 215533,
            195723, 306682, 456718, 765186, 3538213, 1145278
          ],
        },
        {
          name: "手足口病",
          type: "line",
          // stack: "Total",
          data: [
            6406, 13630, 83344, 488955, 1155525, 1774669, 1619706, 2168737, 1828377,
            2778861, 1997371, 2442138, 1929550, 2353310, 1918830, 761355
          ],
        },
        {
          name: "猩红热",
          type: "line",
          // stack: "Total",
          data: [
            25068, 27620, 33488, 27782, 22068, 20876, 63878, 46459, 34207, 54247,
            68249, 59282, 25068, 78864, 81737, 16564
          ],
        }
      ],
    };
    myChart2.setOption(option2);
    //患病因素（光照、气温、降水、SO2、NO2、PM2.5等），饼图
    var myChart3 = echarts.init(document.getElementById("main3"));
    let option3 = {
      backgroundColor: 'white',
      title: {
        text: '患病因素',
        textStyle: {
          align: 'center',
          color: 'black',
          fontSize: 20,
        },
        top: '1%',
        left: '10%',
      },
      legend: {
        top: "bottom",
        textStyle: {
          color: 'black'
        }
      },
      grid: {
        left: '1%',
        right: '8%',
        bottom: 5,
        top: 40,
        containLabel: true,
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [30, 60],
          center: ["45%", "43%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: [

            { "value": 14.061470911, "name": "O3含量" },
            { "value": 28.22173436, "name": "NO2含量" },
            { "value": 16.476399561, "name": "平均空气温度" },
            { "value": 14.8298573, "name": "平均相对湿度" },
            { "value": 14.390779363, "name": "SO2含量" },
            { "value": 64.88474204, "name": "CO含量" },
            { "value": 13.183315038, "name": "日照时长" },
            { "value": 22.524698134, "name": "PM10" },
            { "value": 11.317233809, "name": "PM2.5" },
            { "value": 10.109769484, "name": "降水量" }
          ],
        },
      ],
    };
    myChart3.setOption(option3);
    //各省份患病人数排名
    var myChart4 = echarts.init(document.getElementById("main4"));
    let option4 = {
      title: {
        text: '三种典型传染病各省份患病人数年度总和排名',
        textStyle: {
          align: 'center',
          color: 'black',
          fontSize: 20,
        },
        top: '1%',
        left: '10%',
      },
      color: ['white'],
      backgroundColor: 'white',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (objs, index) {
          let obj = objs[0];
          return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value} 人`;
        },
      },
      grid: {
        left: '1%',
        right: '8%',
        bottom: 5,
        top: 40,
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        data: [50000, 100000, 150000, 200000, 250000, 300000, 350000],
        interval: 50000,
        min: 50000,
        max: 350000,
        splitLine: {
          lineStyle: {
            type: 'solid'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'white',

          }
        },
        axisLabel: {
          formatter: function (value, index) {
            return value;
          },
          color: 'black'
        },
        axisTick: {
          show: false,
        }
      },
      yAxis: {
        type: 'category',
        boundaryGap: true,
        splitArea: {
          areaStyle: {
            opacity: 0
          }
        },
        axisLine: {
          lineStyle: {
            color: 'black',

          }
        },
        data: [
    "浙江省",
    "湖南省",
    "重庆市",
    "河南省",
    "湖北省",
    "广东省",
    "安徽省",
    "陕西省",
    "江苏省",
    "山东省",
    
]

      },
      series: [
        {
          name: '销售量',
          barMaxWidth: '40%',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{c}',
              textStyle: {
                color: 'white'
              }
            }
          },
          data: [
            {
              value: 315539,
              itemStyle: {
                color: '#cf9ef1',
              }
            },
            {
              value: 200882,
              itemStyle: {
                color: '#57e7ec',
              }
            },
            {
              value: 200882,
              itemStyle: {
                color: '#fdb301',
              }
            },
            {
              value: 136322,
              itemStyle: {
                color: '#f59a8f',
              }
            },
            {
              value: 111225,
              itemStyle: {
                color: '#fca4bb',
              }
            },
            {
              value: 106111,
              itemStyle: {
                color: '#2b908f',
              }
            },
            {
              value: 94107,
              itemStyle: {
                color: '#90ed7d',
              }
            },
            {
              value: 53409,
              itemStyle: {
                color: '#e75fc3',
              }
            },
            {
              value: 51746,
              itemStyle: {
                color: '#5085f2',
              }
            },
            {
              value: 50193,
              itemStyle: {
                color: '#8d7fec',
              }
            },
          ]
        },

      ]
    };
    //各年龄段流感患病率
    myChart4.setOption(option4);
    var myChart5 = echarts.init(document.getElementById("main5"));
    let option5 = {
      backgroundColor: 'white',
      title: {
        text: '流感各年龄段流感患病率',
        textStyle: {
          align: 'center',
          color: 'black',
          fontSize: 20,
        },
        top: '3%',
        left: '10%',
      },
      tooltip: {
        show: true,
        trigger: 'axis', //axis , item
        borderColor: 'rgba(0, 151, 251, 1)',
        borderWidth: 1,
        borderRadius: 0,
        textStyle: {
          color: '#BCE9FC',
          fontSize: 16,
          align: 'left',
        },
      },
      grid: {
        right: '5%',
        top: '20%',
        left: '5%',
        bottom: '10%',
        containLabel: true,
      },
      xAxis: {
        name: "年龄",
        nameTextStyle: {
          color: '#65d5ff',
        },
        type: 'category',
        boundaryGap: true,
        data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '65', '70', '75', '80', '85'],
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: '#65D5FF',
            fontStyle: 'normal',
            fontSize: 16,
          },
        },
        axisTick: {
          //坐标轴刻度相关设置。
          show: false,
        },
        axisLine: {
          //坐标轴轴线相关设置
          lineStyle: {
            color: 'rgba(77, 128, 254, 0.2)',
          },
        },
        splitLine: {
          //坐标轴在 grid 区域中的分隔线。
          show: true,
          lineStyle: {
            color: 'rgba(77, 128, 254, 0.2)',
          },
        },
      },
      dataZoom: [
        {
          type: 'slider',
          show: true,
          bottom: '20px',
          borderColor: '#07417a',
          backgroundColor: 'white',
          dataBackground: {
            lineStyle: {
              color: 'transparent',
              shadowOffsetY: 0,
            },
            areaStyle: {
              color: 'transparent',
              shadowOffsetY: 0,
            },
          },
          // 拖拽手柄样式 svg 路径
          handleIcon:
            'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
          handleColor: '#aab6c6',
          height: 6,
          handleSize: 12,
          showDataShadow: false,
          filterMode: 'filter',
          textStyle: {
            color: '#ccc',
          },
          start: 0,
          end: 50,
        },
      ],
      yAxis: [
        {
          name: '患病率（1/10万）',
          nameTextStyle: {
            color: '#65d5ff',
          },
          type: 'value',
          splitNumber: 3,
          axisLabel: {
            textStyle: {
              color: '#65D5FF',
              fontStyle: 'normal',
              fontSize: 16,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(77, 128, 254, 0.2)',
            },
          },
        },
        {
          name: '年龄段患病人数',
          nameTextStyle: {
            color: '#65d5ff'
          },
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#233653'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#233653'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#78bdf5'
            },
            formatter: function (value) {
              return value
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '年龄段患病率（1/10万）',
          type: 'pictorialBar',
          barWidth: '50%',
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255, 64, 0, 0.8)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 34, 66, 0.8)', // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              }, //渐变颜色
            },
          },
          symbol:
            'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',

          data: [
            335.8418,
            514.9771,
            509.1792,
            597.7481,
            430.3227,
            479.3264,
            360.3915,
            346.0065,
            253.9604,
            200.2892,
            134.0163,
            79.6858,
            55.0664,
            54.6753,
            49.5039,
            34.0864,
            19.2485,
            14.9843,
            16.324,
            20.0767,
            21.9875,
            25.153,
            28.3808,
            32.4291,
            40.045,
            49.8523
          ],
        },
        {
          name: '患病人数',
          type: 'line',
          data: [
            50455,
            78979,
            85506,
            100205,
            72051,
            72297,
            58658,
            54753,
            39249,
            30831,
            103087,
            57177,
            43565,
            57511,
            59823,
            34057,
            19068,
            18422,
            19542,
            19111,
            17159,
            17811,
            13012,
            9425,
            7372,
            6152
          ]

          ,
          smooth: true,
          symbol: 'none',
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 227, 168, 0.3)'
              }, {
                offset: 0.5,
                color: 'rgba(255, 227, 168, 1)'
              }, {
                offset: 1,
                color: 'rgba(255, 227, 168, 0.3)'
              }]),
              shadowColor: 'rgba(255, 120, 0,1)',
              shadowBlur: 10
            }
          },
          yAxisIndex: 1
        },
      ],
    };
    myChart5.setOption(option5);
    //致病因子权重
    myChart5.setOption(option5);
    var myChart6 = echarts.init(document.getElementById("main6"));
    let option6 = {
      backgroundColor: 'white',
      title: {
        text: '致病因子权重',
        textStyle: {
          align: 'center',
          color: 'black',
          fontSize: 20,
        },
        top: '1%',
        left: '10%',
      },
      tooltip: { show: false },
      grid: { left: 2, top: '10%', bottom: 0, right: 5, containLabel: true },
      xAxis: {
        type: 'value',
        boundaryGap: false,
        max: 20, // Math.ceil(max / 4) * 5 || 10
        axisLine: { show: true, lineStyle: { color: 'white' } },
        axisTick: { show: false },
        axisLabel: { color: 'white' },
        splitLine: { lineStyle: { color: ['#CEEDFF'], type: [5, 8], dashOffset: 3 } },
      },
      yAxis: {
        type: 'category',
        data: ["O3含量", "NO2含量", "平均空气温度", "平均相对湿度", "SO2含量", "CO含量", "日照时长", "PM10", "PM2.5", "降水量"],
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
        axisTick: { length: 3 },
        axisLabel: { fontSize: 14, color: 'black', margin: 5, padding: 0 },
        inverse: true,
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          showBackground: true,
          backgroundStyle: { color: 'rgba(82, 168, 255, 0.1)', borderRadius: [0, 8, 8, 0] },
          itemStyle: {
            color: '#52A8FF',
            normal: {
              borderRadius: [0, 8, 8, 0],
              color: function (params) {
                // 定义一个颜色集合
                let colorList = [
                  '#52A8FF',
                  '#00B389',
                  '#FFA940',
                  '#FF5A57',
                  '#29EFC4',
                  '#F8AEA4',
                  '#FFC53D',
                  '#009982',
                  '#C099FC',
                  '#F5855F',
                ];
                // 对每个bar显示一种颜色
                return colorList[params.dataIndex];
              },
            },
          },
          barMaxWidth: 16,
          label: { show: true, position: 'insideRight', offset: [-5, 2], color: '#fff' },
          data: [4.1, 18.2, 6.5, 4.8, 4.4, 54.9, 3.2, 2.5, 1.3, 0.1]
          ,
        },
      ],
    };
    myChart6.setOption(option6);
    //气泡图
    var myChart7 = echarts.init(document.getElementById("main7"));
    
    let option8 = {
            title: {
                text: '2023年传染感染科提名医院',
                textStyle: {
                    align: 'center',
                    color: 'black',
                    fontSize: 20,
                },
                top: '1%',
                left: '10%',
            },
            backgroundColor: 'white',
            tooltip: {},
            color: ['white', 'white', 'white'],
            series: [{
                type: 'graph',
                layout: 'force',
                force: {
                    repulsion: 100,
                    edgeLength: 3
                },
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                data: [{
                    "name": "首都医科大学附属北京地坛医院",
                    "value": 10000,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(27, 94, 93)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(27, 94, 93)",
                            "color": "rgb(27, 94, 93)"
                        }
                    }
                }, {
                    "name": "首都医科大学附属北京佑安医院",
                    "value": 6181,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(206, 188, 11)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(206, 188, 11)",
                            "color": "rgb(206, 188, 11)"
                        }
                    }
                }, {
                    "name": "华中科技大学同济医学院附属协和医院",
                    "value": 4386,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(165, 190, 198)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(165, 190, 198)",
                            "color": "rgb(165, 190, 198)"
                        }
                    }
                }, {
                    "name": "重庆医科大学附属第二医院",
                    "value": 4055,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(98, 41, 72)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(98, 41, 72)",
                            "color": "rgb(98, 41, 72)"
                        }
                    }
                }, {
                    "name": "吉林大学第一医院",
                    "value": 2467,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(175, 20, 143)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(175, 20, 143)",
                            "color": "rgb(175, 20, 143)"
                        }
                    }
                }, {
                    "name": "西安交通大学第一附属医院",
                    "value": 2244,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(77, 231, 55)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(77, 231, 55)",
                            "color": "rgb(77, 231, 55)"
                        }
                    }
                }, {
                    "name": "安徽医科大学第一附属医院",
                    "value": 1898,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(26, 83, 246)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(26, 83, 246)",
                            "color": "rgb(26, 83, 246)"
                        }
                    }
                }, {
                    "name": "中南大学湘雅医院",
                    "value": 1484,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(155, 118, 127)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(155, 118, 127)",
                            "color": "rgb(155, 118, 127)"
                        }
                    }
                }, {
                    "name": "上海市（复旦大学附属）公共卫生临床中心",
                    "value": 1112,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(116, 207, 18)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(116, 207, 18)",
                            "color": "rgb(116, 207, 18)"
                        }
                    }
                }, {
                    "name": "重庆医科大学附属第一医院",
                    "value": 965,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(98, 224, 224)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(98, 224, 224)",
                            "color": "rgb(98, 224, 224)"
                        }
                    }
                }, {
                    "name": "陆军军医大学第一附属医院",
                    "value": 847,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(137, 37, 21)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(137, 37, 21)",
                            "color": "rgb(137, 37, 21)"
                        }
                    }
                }, {
                    "name": "北京大学人民医院",
                    "value": 847,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(137, 37, 21)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(137, 37, 21)",
                            "color": "rgb(137, 37, 21)"
                        }
                    }
                }, {
                    "name": "深圳市第三人民医院",
                    "value": 847,
                    "symbolSize": 50,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(137, 37, 21)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(137, 37, 21)",
                            "color": "rgb(137, 37, 21)"
                        }
                    }
                }]
            }]
        };

    myChart7.setOption(option8);
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

#container {
   background:#d9d9d9 ;
  /* line-height: 1.15; */
  width: 100%;
  height: 1000px;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mainbox {
  display: flex;
  width: 100%;
  max-height: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
}

.mainbox .column {
  flex: 3;
}

.mainbox .column:nth-child(2) {
  width: 650px;
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}

.mainbox .panel {
  position: relative;
  height: 330px;
  width: 500px;
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  /* background: url("../../public/image/line.png") rgba(255, 255, 255, 0.03); */
}

.mainbox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}

.mainbox .panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}

.mainbox .panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mainbox .panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}

.mainbox .panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}

.mainbox .panel h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
  font-weight: 400;
}

.mainbox .panel h2 a {
  color: #a7a7a7;
  text-decoration: none;
  margin: 0 0.125rem;
}

.mainbox .panel h2 .a-active {
  color: #fff;
}

.mainbox .panel .chart {
  height: 300px;
}

.map {
  position: relative;
  /* margin-top: 120px; */
  width: 800px;
  height: 1000px;
}

.map .map1 {
  position: absolute;
  left: 55%;
  top: 35%;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  /* background: white;  */
  background-size: 100% 100%;
  opacity: 0.3;
}

.map .map2 {
  position: absolute;
  top: 35%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  /* background:white; */
  background-size: 100% 100%;
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
  z-index: 10;
}

.map .map3 {
  position: absolute;
  top: 35%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  /* background-image: url("../../public/image/jt.png"); */
  background-size: 100% 100%;
  animation: rotate2 15s linear infinite;
}

#main1 {
  margin: 0 auto;
  /* position: absolute;
    top: 0;
    left: 0; */
  height: 990px;
  width: 810px;
  /* z-index: 10; */
  background-color: white;
}

#main2 {
  margin: 0 auto;
  height: 320px;
  width: 490px;
}

#main3 {
  margin: 0 auto;
  height: 320px;
  width: 490px;
}

#main4 {
  margin: 0 auto;
  height: 320px;
  width: 490px;
}

#main5 {
  margin: 0 auto;
  height: 320px;
  width: 490px;
}

#main6 {
  margin: 0 auto;
  height: 320px;
  width: 490px;
}

#main7 {
  margin: 0 auto;
  height: 320px;
  width: 490px;
}

.disease-title {
  color: #0f0101;
  /* 白色文字 */
  font-size: 32px;
  /* 文字大小为 32px */
  text-align: center;
  /* 文本居中 */
  background-color: #fff;
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

.custom-row {
  width: 100%;
  height: 200px;
}

.bt {
  width: 80px;
  height: 40px;
}
</style>